<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旅游网注册</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
	   .error{
  				color:RED;
 			 	font-size:12px;
 		    }
 	   .success{
  				color:green;
 			 	font-size:12px;
 		    }
			body{
				font-family: "微软雅黑";
				background: url(https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg) no-repeat;
			}
			a{
    			text-decoration: none;
    		}
    		.tang-pass-reg a {
   				color: #2E58FF;
			}
			.tang-pass-reg a:hover {
   				text-decoration: underline;
			}
			.mod-new-reg-content{
				position: absolute;
			    right: 139px;
			    top: 10%;
			    width: 480px;
			    background: rgba(255,255,255,.9);
			    border-radius: 12px;
			    overflow: hidden;
			}
			.new-reg-guide-login{
				margin: 50px 0 22px 39px
			}
			 .new-reg-guide-login h3 {
			    font-size: 36px;
			    color: #000;
			    padding-bottom: 4px;
			}
			 .new-reg-guide-login p {
			    font-size: 14px;
			    color: #9B9B9B;
    		}
    		.new-reg-guide-login a{
    			color: #2e58ff;
    		}
    		.tang-pass-reg .pass-label {
    			display: inline-block;  /*设置元素的显示方式依然是内联元素,但是拥有块的特性,可以设置宽度高度等等*/
			    font-size: 14px;
			    color: #333;
			    letter-spacing: 0;
			    text-align: right;
			    width: 82px;
			    height: 40px;
			    line-height: 40px;
			    margin-right: 15px;
			    font-weight: 200;
			}
			.tang-pass-reg .pass-text-input {
				display: inline-block;  /*设置元素的显示方式依然是内联元素,但是拥有块的特性,可以设置宽度高度等等*/
			    padding: 11px 10px;
			    max-height: 40px;
			    background: #fff;
			    border: 1px solid #E0E0E0;
			    border-radius: 4px;
			    font-size: 14px;
			    width: 321px;
			    color: #000;
			}
    		.tang-pass-reg .pass-text-input:hover{
    			border-color: #bdc2cc;
    		}
    		.tang-pass-reg .pass-text-input-verifyCode{
    			width: 184px;
    			margin-right: 6px;
    		}
    		.tang-pass-reg input.pass-button-verifyCodeSend{
    			display: inline-block;  /*设置元素的显示方式依然是内联元素,但是拥有块的特性,可以设置宽度高度等等*/
    			width: 126px;
    			height: 40px;
			    border-radius: 4px;
			    background: #fff;
			    border: 1px solid #E0E0E0;
			    font-size: 12px;
			    color: #333;
			    letter-spacing: 0;
			    text-align: center;
			    line-height: 24px;
    		}
    		.tang-pass-reg input.pass-button-verifyCodeSend:hover {
			    color: #2E58FF;
			    border: 1px solid #2E58FF;
			    background: #fff;
			}
			.tang-pass-reg .pass-form-item {
   				 margin-bottom: 40px;
   		   }
   		   .tang-pass-reg .pass-button-submit {
			    background: #BDCEFC;
			    border-radius: 25px;
			    width: 399px;
			    display: block;
			    height: 50px;
			    font-size: 16px;
			    font-weight: 700;
			    cursor: pointer;
			    color: #fff;
			    background-image: none;
			    border: 0;
				margin-top:60px ;
				margin-bottom: 15px;
				margin-left: 40px;
   			 }
   			 .tang-pass-reg .pass-button-submit:hover{
   			 	background: #3f89ec;
   			 }
   			 .tang-pass-reg .pass-form-item-isAgree{
   			 	margin-left: 41px;
			    width: 399px;
			    text-align: center;
			    color: #666;
			    font-size: 12px;
			    margin-left: 35px;
   			 }
   			 .tang-pass-reg  .pass-checkbox-isAgree{
   			 	position: relative;
   			 	top: 2px;
   			 }
   			 .pass-form-item-isAgree label{
   			 	color: #666;
			    font-size: 12px;
			    margin-left: 5px;
   			 }
		</style>
	</head>

	<body>
		<div id="">
			<!--头部-->
			<div id="head">

			</div>
			<!--导航栏-->
			<div id="nav">

			</div>
			<!--内容-->
			<div id="content">
				<!--注册表单-->
				<div id="" class="mod-new-reg-content">
					<div class="new-reg-guide-login">
						<h3>欢迎注册</h3>
						<p>
							<span>已有帐号？</span>
							<a href="../front/userLogin.jsp" id="login_btn">登录</a>
						</p>
					</div>
					<div id="" class="tang-pass-reg">
						<form action="" method="post" id="register-form">
							<input type="hidden" name="op" value="register"/>
							<p class="pass-form-item">
								<label for="username" class="pass-label">用户名</label>
								<input type="text" name="username" id="username" value="" required="required" placeholder="请设置用户名" class="pass-text-input"/>
							<br>
								<label id="usernameTip" style="padding-left:0px"></label>
							</p>
							
							<p class="pass-form-item">
								<label for="phone" class="pass-label">手机号</label>
								<input type="tel" name="phone" id="phone" value="" placeholder="请输入您注册的手机号" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" class="pass-text-input"  />
							</p>
							<p class="pass-form-item">
								<label for="password" class="pass-label">密&nbsp;&nbsp;&nbsp;码</label>
								<input type="password" name="password" id="password" value="" placeholder="请设置登录密码" required="required" class="pass-text-input"/>
							</p>
							<p class="pass-form-item">
								<label for="verifyCode" class="pass-label">验证码</label>
								<input type="text" name="verifyCode" id="verifyCode" value="" placeholder="请输入验证码"  class="pass-text-input pass-text-input-verifyCode"/>
								<input type="button" id="GetCode" value="获取验证码"  class="pass-button-verifyCodeSend" />
							</p>
							<p >
								<input type="button" id="input-btn" name="" value="注册" class="pass-button-submit" />
							</p>
							<p class="pass-form-item pass-form-item-isAgree">
								
							</p>
						</form>
					</div>
				</div>
			</div>
			<!--尾部-->
			<div id="footer">

			</div>
		</div>
	</body>
<script src="${pageContext.request.contextPath}/back/js/jquery-3.5.1.js" ></script>
<script type="text/javascript">

	$(document).ready(function() {
		// 对用户输入框失去焦点事件
		$("#username").blur(function(){
			var username = $(this).val();
			if(username.trim().length==0){
				$("#usernameTip").text("用户名不能为空");
				$("#usernameTip").removeClass("success");
				$("#usernameTip").addClass("error");
				// 注册按钮设置为不可用
				$("#register").prop("disabled",true);
			}else{
				// 发送异步请求,判断用户名是否存在
				$.ajax({
					async:true,
					url:"${pageContext.request.contextPath}/user",
					type:"POST",
					data:{
						op:"existOfUserName",
						userName:username
					},
					dataType: "text", // 可选,预期的服务器响应数据类型,当前响应是文本
					success:function(result){
						if("exist" == result){ // 用户名已存在,不可用
							$("#usernameTip").text("用户名已经被注册过了,请重新输入");
							$("#usernameTip").removeClass("success");
							$("#usernameTip").addClass("error");
							// 注册按钮设置为不可用
							$("#register").prop("disabled",true);
						}else if("no exist" == result){ // 用户名不存在,可用
							$("#usernameTip").text("可用");
							$("#usernameTip").removeClass("error");
							$("#usernameTip").addClass("success");
							// 注册按钮设置为可用
							$("#register").prop("disabled",false);
						}
					
					},
					error:function(){
						alert("异步请求失败!");
					}
				});
			}
		});
		
		$(document).on("click","#input-btn",function(){		
			var userName = $("#username").val();
			var userPassword = $("#password").val();
			var userPhone = $("#phone").val();
			var verifyCode = $("#verifyCode").val();
			
			if(userName.trim().length == 0 || userPassword.trim().length == 0 || userPhone.trim().length == 0 || verifyCode.trim().length == 0){
				alert("用户名或密码不能为空");
			}else{
				// 获取表单数据
				var formData = $("#register-form").serialize(); // name=value&name=value...
				$.ajax({
	    			async:true,
	    			url:"${pageContext.request.contextPath}/user",
	    			type:"POST",
	    			data:formData,
	    			dataType:"text",
	    			success:function(result){// 登录用户信息
	    				if(result == "CodeFail"){
	    					alert("验证码错误！");
	    					$("#userPassword").val("");
	    					
	    				}else{
		    				if(result == "fail"){
		    					alert("注册失败！");
		    					// 清空
		    					$("#userPassword").val("");
		    				}else{
			    				var content = "<ul class=\"nav navbar navbar-right\">";
			    				if(result.picturePath == null){
			    					// 没有头像显示默认头像
			    					content+="<li style=\"float:left;\"><img src=\"${pageContext.request.contextPath}/front/image/defaultFacepic.jpg\" width=\"50\" height=\"50\" /></li>";
			    				}else{
			    					// 有头像请求下载控制器回显头像
			    					content+="<li style=\"float:left;\"><img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+result.picturePath+"\" width=\"50\" height=\"50\" /></li>";
			    				}
			    				content += "<li style=\"float:left;color:white;\"><span class=\"icon-bar\">"+result.userName+"</span></li>"+
							    	        "<li style=\"float:left;\"> <button type=\"button\" class=\"btn btn-success\" id=\"btn-logout\">注销</button></li>"+
							    	       "</ul>";
			    				
			    				$("#loginnavbar").html(content); 
			    				
			    				// 用户登录状态存储在本地缓存中-JavaScript的sessionStorage
			    				// sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
			    				sessionStorage.setItem("login-status", "true");
			    				
			    				location.href="${pageContext.request.contextPath}/front/userLogin.jsp";
		    				}
	    				}
	    			},
	    			error:function(){
	    				alert("异步请求失败");
	    			}
	    		});
			}
		});
		$(document).on("click","#GetCode",function(){
			var phone=$("#phone").val();
			$.ajax({
    			async:true,
    			url:"${pageContext.request.contextPath}/user",
    			type:"POST",
    			data:{
    				op:"getCode",
    				phone:phone
    			},
    			dataType:"text",
    			success:function(result){
    				
    			},
    			error:function(){
    				alert("异步请求失败");
    			}
			})	
		})
		
		/* // 头像选择做改变事件
		$("#picture").change(function(){
			// 生成图片预览功能
			// 1.得到文件列表数组,获取数组中第一个文件
			var imgFile = this.files[0];

			// 判断是否有上传文件
			if(imgFile==null){	
				$("#preview-img").prop("src","#");			
			}else{
				// 正则表达式验证选择的是否是图片类型
				var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
				if (!regexImageFilter.test(imgFile.type)) {
					 alert("请选择有效图片");
					 $("#picture").val("");
				}else{ 
					// 2.构建文件读取流对象
					var fileReader =  new FileReader();
					// 3.利用流对象获取文件内容
					fileReader.readAsDataURL(imgFile);
					// 4.加载事件
					fileReader.onload = function(){
						// 5.渲染头像预览框
						$("#preview-img").prop("src",this.result); // this.result从文件读取流对象中获取数据
					}
				 } 
			}
		}); */
	})
	
	/* // 服务器提示上传文件类型不匹配
	var uploaderror = "${param.fileuploaderror}";
	if(uploaderror!=""){
		
		alert("请选择有效图片");
		location.href = "${pageContext.request.contextPath}/front/register.jsp";
	} */
</script>
</html>